<template>
	<view class="review-box page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="transparent" height="74">
				<view class="u-nav-slot" slot="left" @click="goBack">
					<image style="height: 63rpx;width: 50rpx; scale: 0.8;" src="@/static/images/review/fanhui.png" />
				</view>
				<view class="u-nav-slot-center" slot="center">
					<span>测评中心</span>
				</view>
			</u-navbar>
		</view>

		<view class="content">
			<!-- 同步测试 -->
			<view>
				<view class="title-box flex-align-center">
					<view class="line"></view>
					<view class="title-name">
						我的同步课程测试
					</view>
					<view class="select-box">
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view>
				</view>
				<view class="list flex-align-center">
					<view class="list-item flex-center list-item-mine">
						词汇测试
					</view>
					<view class="list-item flex-center list-item-mine">
						词组测试
					</view>
					<view class="list-item flex-center list-item-mine">
						句子测试
					</view>
					<view class="list-item flex-center list-item-mine">
						语法测试
					</view>
					<view class="list-item flex-center list-item-mine">
						习题测试
					</view>
					<view class="list-item flex-center list-item-mine">
						水平测试
					</view>
				</view>
			</view>
			<!-- 其他同步课程测评 -->
			<view>
				<view class="title-box flex-align-center">
					<view class="line"></view>
					<view class="title-name">
						其他同步课程测评
					</view>
					<view class="select-box">
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view>
				</view>
				<view class="list flex-align-center">
					<view class="list-item flex-center list-item-other-sync">
						词汇测试
					</view>
					<view class="list-item flex-center list-item-other-sync">
						词组测试
					</view>
					<view class="list-item flex-center list-item-other-sync">
						句子测试
					</view>
					<view class="list-item flex-center list-item-other-sync">
						水平测试
					</view>
				</view>
			</view>
			<!-- 拓展课程测评 -->
			<view>
				<view class="title-box flex-align-center">
					<view class="line"></view>
					<view class="title-name">
						拓展课程测评
					</view>
					<view class="select-box">
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view>
				</view>
				<view class="list flex-align-center">
					<view class="list-item flex-center list-item-extend">
						词汇测试
					</view>
				</view>
			</view>
			<!-- 其他测评 -->
			<view>
				<view class="title-box flex-align-center">
					<view class="line"></view>
					<view class="title-name">
						其他测评
					</view>
					<view class="select-box">
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view>
				</view>
				<view class="list flex-align-center" style="margin-bottom: 0;">
					<view class="list-item flex-center list-item-other">
						词汇量测试
					</view>
					<view class="list-item flex-center list-item-other">
						记忆容量测试
					</view>
					<view class="list-item flex-center list-item-other">
						注意力测试
					</view>
					<view class="list-item flex-center list-item-other">
						键盘熟练度测试
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				value: "",
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
			};
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabChange(val) {
				console.log(val);
				this.currentTab = val;
			}
		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: #505CFE;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #B0B0B0;
		font-size: px_2_vw(54);

	}

	.content {
		flex: 1;
		background: #fff;
		border-radius: 65rpx;
		margin: 0 54rpx 33rpx 54rpx;
		padding: 57rpx 50rpx;

		.line {
			width: 7rpx;
			height: 36rpx;
			background: #505CFE;
			border-radius: 3px 3px 3px 3px;

		}

		.title-name {
			margin: 0 26rpx 0 17rpx;
			font-weight: bold;
			font-size: px_2_vw(30);
		}

		.select-box {
			width: px_2_vw(245);
			// height: px_2_vw(40);
		}

		.list {
			margin: 33rpx 0;

			.list-item {
				padding: 0 34rpx;
				// width: px_2_vw(220);
				height: px_2_vw(93);
				border-radius: 21rpx 21rpx 21rpx 21rpx;
				color: #fff;
				font-size: px_2_vw(34);
				margin-right: 28rpx;
			}
			.list-item-mine {
				background: radial-gradient(100% 100% at 0% 0%, #001EFF 0%, #625EF5 100%);
			}
			.list-item-other-sync {
				background: radial-gradient(100% 100% at 0% 0%, #7106B5 0%, #A04EF4 100%);
			}
			.list-item-extend {
				background: radial-gradient(100% 100% at 0% 0%, #06A5E1 0%, #76CFD2 100%);
			}
			.list-item-other {
				background: radial-gradient(100% 100% at 0% 0%, #09D376 0%, #5BCF92 100%);
			}
		}
	}

	::v-deep .uni-select {
		height: px_2_vw(48) !important;
	}
</style>